<!DOCTYPE html>
<html>
<head>
  <title>Vue Router CDN Example</title>
  <script src="https://unpkg.com/vue@3.2.20/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script>
</head>
<style>
    a{
        text-decoration: none;
        margin-left: 200px;
    }
</style>
<body>
  <div id="app">
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
 
  <script>
	  const {createApp} = Vue;
	  const {ref} = Vue;
	  const {reactive} = Vue;
	  const {onMounted} = Vue;
    const {createRouter } = VueRouter;
 
    // 定义组件
	const Default={template:"<div></div>"};
    const About = { template: `<div>111111</div>
	<button @click="testfunction"></button>`,
	 setup(){
		 const testmessage=ref("123456");
		 function testfunction(){
			 console.log(testmessage.value);
			 }
			 return{
				 testmessage,
				 testfunction,
			 }
	 }
	 };
 
    // 创建路由实例
    const router = createRouter({
      history: VueRouter.createWebHashHistory(),
      routes: [
		{ path: '/', redirect: '/Default' },
        { path: '/Default', component: Default },
        { path: '/about', component: About }
      ]
    });
 
    // 创建 Vue 应用程序
    const app =Vue.createApp({
		setup() {
			onMounted(() => {
				router.push('/');
			})
			return {
			}
		}
	});
    app.use(router);
    app.mount('#app');
  </script>
</body>
</html>